<template>
  <el-dialog @close="checkedKeys = []" title="分配权限" :visible.sync="setRightDialogVisible" width="50%">
    <!-- 树形组件 -->
    <el-tree :data="rights" default-expand-all show-checkbox node-key="id" :props="defaultProps" ref="treeRef"
      :default-checked-keys="checkedKeys">
    </el-tree>
    <span slot="footer" class="dialog-footer">
      <el-button @click="setRightDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="allotRights">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { privilegeListApi } from '@/api/privilege'
import { setRoleRightsApi } from '@/api/role'
export default {
  name: 'SetRights',
  data() {
    return {
      // 要分配权限的角色id
      roleId: '',
      // 控制对话框的打开和关闭状态
      setRightDialogVisible: false,
      // 树形组件的数据
      rights: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      // 默认选中的三级节点的id组合
      checkedKeys: []
    }
  },
  methods: {
    // 打开dialog对话框
    async open(role) {
      this.roleId = role.id
      // 获取所有的权限树结构数据
      const res = await privilegeListApi('tree')
      if (res.meta.status !== 200) {
        return this.$message.error('获取权限树数据失败')
      }
      // console.log(res)
      // 更改权限树的数据
      this.rights = res.data

      // 获取默认选中的三级节点（三级节点的选中状态决定了一、二级节点的选中状态）
      this.getLeafKeys(role, this.checkedKeys)

      // 打开对话框
      this.setRightDialogVisible = true
    },

    // 获取三级权限id,形成数组
    getLeafKeys(node, arr) {
      // 如果没有children选项，说明此时已经是三级权限了
      // 这是递归的出口
      if (!node.children) {
        arr.push(node.id)
        return
      }
      node.children.forEach(item => this.getLeafKeys(item, arr))
    },
    /*
     getLeafKeys(node) {
       // 递归：子级的处理方式和父级的处理方式一致时，就形成递归
       // 递归入口：多级分类都有共同的children属性
       // 递归出口：三级分类没有children
       // 设置数组变量接收三级权限的id
       const arr = []
       // 如果没有children选项，那么就不需要再进行遍历
       if (!node.children) {
         return
       }
       // 一级权限
       node.children.forEach(item1 => {
         if (!item1.children) {
           return
         }
         // 二级权限
         item1.children.forEach(item2 => {
           if (!item2.children) {
             return
           }
           // 三级权限
           item2.children.forEach(item3 => {
             arr.push(item3.id)
           })
         })
       })
       console.log(arr)
     }, */
    // 给当前角色分配权限
    async allotRights() {
      // 获取被选中的节点
      const checkedKeys = this.$refs.treeRef.getCheckedKeys() // [125,128]
      // 获取半选中父级节点
      const halfCheckedKeys = this.$refs.treeRef.getHalfCheckedKeys() // [110,120]
      // 合并父子节点，形成一、二、三级节点的数据形式，并且各级节点使用,隔开 [110,120,125,110,120,128]
      const keys = [...halfCheckedKeys, ...checkedKeys]
      // 将数组转换为以,分割的字符串
      const rids = keys.join(',')
      // 发送请求，实现权限的分配
      const res = await setRoleRightsApi(this.roleId, rids)
      if (res.meta.status !== 200) {
        return this.$message.error('分配权限失败:' + res.meta.msg)
      }
      this.$message.success('权限分配成功')
      this.setRightDialogVisible = false
      // 触发父组件重新获取数据
      this.$emit('on-set-rights')
    }
  }
}
</script>

<style lang="scss" scoped></style>